/**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
<template>
  <div :style="{position: 'absolute', left: Data.busleft, top: Data.bustop}" class="southbusmap">
    <div :class="Data.id >= 13 && Data.id <= 16 ? '' : 'hide'">
      <svg
        version="1.1"
        id="图层_1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        x="0px"
        y="0px"
        viewBox="0 0 24 91"
        style="enable-background:new 0 0 24 91;"
        xml:space="preserve"
        :width="IconWdith"
        :height="IconLengh"
      >
        <g id="图层_2" data-name="图层 2">
          <g id="图层_1-2" data-name="图层 1">
            <g id="有轨电车-南"  v-if="Data.controltype === 5">
              <path
                class="cls-1"
                d="M24,87V4a4,4,0,0,0-4-4H4A4,4,0,0,0,0,4V87a4,4,0,0,0,4,4H20A4,4,0,0,0,24,87Z"
              ></path>
              <g class="cls-2">
                <rect class="cls-3" x="2.4" y="3.5" width="0.5" height="3"></rect>
                <path
                  class="cls-3"
                  d="M2.4,82.6V76.9h.5v5.7Zm0-7.6V69.3h.5V75Zm0-7.6V61.7h.5v5.7Zm0-7.6V54.1h.5v5.7Zm0-7.6V46.5h.5v5.7Zm0-7.7V38.8h.5v5.7Zm0-7.6V31.2h.5v5.7Zm0-7.6V23.6h.5v5.7Zm0-7.6V16h.5v5.7Zm0-7.6V8.4h.5v5.7Z"
                ></path>
                <rect class="cls-3" x="2.4" y="84.5" width="0.5" height="3"></rect>
              </g>
              <g class="cls-2">
                <rect class="cls-3" x="21.2" y="3.5" width="0.5" height="3"></rect>
                <path
                  class="cls-3"
                  d="M21.2,82.6V76.9h.5v5.7Zm0-7.6V69.3h.5V75Zm0-7.6V61.7h.5v5.7Zm0-7.6V54.1h.5v5.7Zm0-7.6V46.5h.5v5.7Zm0-7.7V38.8h.5v5.7Zm0-7.6V31.2h.5v5.7Zm0-7.6V23.6h.5v5.7Zm0-7.6V16h.5v5.7Zm0-7.6V8.4h.5v5.7Z"
                ></path>
                <rect class="cls-3" x="21.2" y="84.5" width="0.5" height="3"></rect>
              </g>
              <path
                class="cls-3"
                d="M13.9,49.1h0a4.87,4.87,0,0,0-4.8,4.8v2.5l-.4-.6c0-.1-.1-.1-.2-.1s-.1.1-.2.1l-.9,2.4a.37.37,0,0,0,.1.3.37.37,0,0,0,.3-.1l.8-2,.5.8V73.6a.47.47,0,0,0,.5.5h6a.47.47,0,0,0,.5-.5v-23C16.2,49.7,14.7,49.1,13.9,49.1Zm-1,22.4a.43.43,0,0,1,.4.4v1.2a.43.43,0,0,1-.4.4H11.2a.43.43,0,0,1-.4-.4V71.9a.43.43,0,0,1,.4-.4Zm0-2.3a.43.43,0,0,1,.4.4v1.2a.43.43,0,0,1-.4.4H11.2a.43.43,0,0,1-.4-.4V69.6a.43.43,0,0,1,.4-.4Zm0-2.6a.43.43,0,0,1,.4.4v1.2a.43.43,0,0,1-.4.4H11.2a.43.43,0,0,1-.4-.4V67a.43.43,0,0,1,.4-.4Zm0-2.3a.43.43,0,0,1,.4.4v1.2a.43.43,0,0,1-.4.4H11.2a.43.43,0,0,1-.4-.4V64.7a.43.43,0,0,1,.4-.4Zm0-2.4a.43.43,0,0,1,.4.4v1.2a.43.43,0,0,1-.4.4H11.2a.43.43,0,0,1-.4-.4V62.3a.43.43,0,0,1,.4-.4Zm0-2.5a.43.43,0,0,1,.4.4V61a.43.43,0,0,1-.4.4H11.2a.43.43,0,0,1-.4-.4V59.8a.43.43,0,0,1,.4-.4Zm0-2.4a.43.43,0,0,1,.4.4v1.2a.43.43,0,0,1-.4.4H11.2a.43.43,0,0,1-.4-.4V57.4a.43.43,0,0,1,.4-.4Zm0-2.3a.43.43,0,0,1,.4.4v1.2a.43.43,0,0,1-.4.4H11.2a.43.43,0,0,1-.4-.4V55a.43.43,0,0,1,.4-.4h1.7Zm1.9-3.5a.65.65,0,0,1,.6.6V53a.65.65,0,0,1-.6.6H11.5a.65.65,0,0,1-.6-.6,1.79,1.79,0,0,1,1.8-1.8Z"
              ></path>
              <path class="cls-3" d="M16.9,74.7V48.4a.4.4,0,0,1,.8,0V74.7a.4.4,0,0,1-.8,0Z"></path>
            </g>
            <g id="公交车-南"  v-if="Data.controltype === 3">
              <path
                class="cls-1"
                d="M24,87V4a4,4,0,0,0-4-4H4A4,4,0,0,0,0,4V87a4,4,0,0,0,4,4H20A4,4,0,0,0,24,87Z"
              ></path>
              <g class="cls-2">
                <rect class="cls-3" x="2.3" y="3.5" width="0.5" height="3"></rect>
                <path
                  class="cls-3"
                  d="M2.3,82.6V76.9h.5v5.7Zm0-7.6V69.3h.5V75Zm0-7.6V61.7h.5v5.7Zm0-7.6V54.1h.5v5.7Zm0-7.6V46.5h.5v5.7Zm0-7.7V38.8h.5v5.7Zm0-7.6V31.2h.5v5.7Zm0-7.6V23.6h.5v5.7Zm0-7.6V16h.5v5.7Zm0-7.6V8.4h.5v5.7Z"
                ></path>
                <rect class="cls-3" x="2.3" y="84.5" width="0.5" height="3"></rect>
              </g>
              <g class="cls-2">
                <rect class="cls-3" x="21.1" y="3.5" width="0.5" height="3"></rect>
                <path
                  class="cls-3"
                  d="M21.1,82.6V76.9h.5v5.7Zm0-7.6V69.3h.5V75Zm0-7.6V61.7h.5v5.7Zm0-7.6V54.1h.5v5.7Zm0-7.6V46.5h.5v5.7Zm0-7.7V38.8h.5v5.7Zm0-7.6V31.2h.5v5.7Zm0-7.6V23.6h.5v5.7Zm0-7.6V16h.5v5.7Zm0-7.6V8.4h.5v5.7Z"
                ></path>
                <rect class="cls-3" x="21.1" y="84.5" width="0.5" height="3"></rect>
              </g>
              <path
                class="cls-3"
                d="M15.6,55.5a1.4,1.4,0,1,0-1.4-1.4A1.51,1.51,0,0,0,15.6,55.5Zm0-.4a1,1,0,0,1-1-1,.94.94,0,0,1,1-1,1,1,0,1,1,0,2Z"
              ></path>
              <path
                class="cls-3"
                d="M15.6,69a1.4,1.4,0,1,0-1.4-1.4A1.43,1.43,0,0,0,15.6,69Zm0-.4a1,1,0,1,1,1-1A1,1,0,0,1,15.6,68.6Z"
              ></path>
              <path
                class="cls-3"
                d="M10.9,74.9h3.7c.2-.9.7-3,1-4.1V69.6a1.88,1.88,0,0,1-1.8-1.9,2,2,0,0,1,1.8-1.9V55.9A1.88,1.88,0,0,1,13.8,54a2,2,0,0,1,1.8-1.9V48.5a.47.47,0,0,0-.5-.5H12.3l-.3.6H9.6A1.37,1.37,0,0,0,8.2,50V72A2.74,2.74,0,0,0,10.9,74.9ZM9.8,51.6a.47.47,0,0,1-.5-.5v-.8a.47.47,0,0,1,.5-.5h4.5a.47.47,0,0,1,.5.5V51a.47.47,0,0,1-.5.5l-4.5.1Zm-.2,5.6a.43.43,0,0,1-.4-.4V52.9a.43.43,0,0,1,.4-.4h1.7a.43.43,0,0,1,.4.4v3.9a.43.43,0,0,1-.4.4Zm0,5.3a.43.43,0,0,1-.4-.4V58.2a.43.43,0,0,1,.4-.4h1.7a.43.43,0,0,1,.4.4v3.9a.43.43,0,0,1-.4.4Zm0,5.4a.43.43,0,0,1-.4-.4V63.6a.43.43,0,0,1,.4-.4h1.7a.43.43,0,0,1,.4.4v3.9a.43.43,0,0,1-.4.4Zm0,5.3a.43.43,0,0,1-.4-.4V68.9a.43.43,0,0,1,.4-.4h1.7a.43.43,0,0,1,.4.4v3.9a.43.43,0,0,1-.4.4Z"
              ></path>
            </g>
            <g id="BRT-南"  v-if="Data.controltype === 4">
              <path
                class="cls-1"
                d="M24,87V4a4,4,0,0,0-4-4H4A4,4,0,0,0,0,4V87a4,4,0,0,0,4,4H20A4,4,0,0,0,24,87Z"
              ></path>
              <g class="cls-2">
                <rect class="cls-3" x="2.4" y="3.5" width="0.5" height="3"></rect>
                <path
                  class="cls-3"
                  d="M2.4,82.6V76.9h.5v5.7Zm0-7.6V69.3h.5V75Zm0-7.6V61.7h.5v5.7Zm0-7.6V54.1h.5v5.7Zm0-7.6V46.5h.5v5.7Zm0-7.7V38.8h.5v5.7Zm0-7.6V31.2h.5v5.7Zm0-7.6V23.6h.5v5.7Zm0-7.6V16h.5v5.7Zm0-7.6V8.4h.5v5.7Z"
                ></path>
                <rect class="cls-3" x="2.4" y="84.5" width="0.5" height="3"></rect>
              </g>
              <g class="cls-2">
                <rect class="cls-3" x="21.2" y="3.5" width="0.5" height="3"></rect>
                <path
                  class="cls-3"
                  d="M21.2,82.6V76.9h.5v5.7Zm0-7.6V69.3h.5V75Zm0-7.6V61.7h.5v5.7Zm0-7.6V54.1h.5v5.7Zm0-7.6V46.5h.5v5.7Zm0-7.7V38.8h.5v5.7Zm0-7.6V31.2h.5v5.7Zm0-7.6V23.6h.5v5.7Zm0-7.6V16h.5v5.7Zm0-7.6V8.4h.5v5.7Z"
                ></path>
                <rect class="cls-3" x="21.2" y="84.5" width="0.5" height="3"></rect>
              </g>
              <path
                class="cls-3"
                d="M15.7,55.5a1.4,1.4,0,1,0-1.4-1.4A1.43,1.43,0,0,0,15.7,55.5Zm0-.4a1,1,0,0,1-1-1,.94.94,0,0,1,1-1,1,1,0,0,1,0,2Z"
              ></path>
              <path
                class="cls-3"
                d="M15.7,69a1.4,1.4,0,1,0-1.4-1.4A1.37,1.37,0,0,0,15.7,69Zm0-.4a1,1,0,1,1,1-1A1,1,0,0,1,15.7,68.6Z"
              ></path>
              <path
                class="cls-3"
                d="M10.9,74.9h3.7c.2-.9.7-3,1-4.1V69.6a1.88,1.88,0,0,1-1.8-1.9,2,2,0,0,1,1.8-1.9V55.9A1.88,1.88,0,0,1,13.8,54a2,2,0,0,1,1.8-1.9V48.5a.47.47,0,0,0-.5-.5H12.4l-.3.6H9.7A1.37,1.37,0,0,0,8.3,50V72A2.72,2.72,0,0,0,10.9,74.9Zm-1-23.3a.47.47,0,0,1-.5-.5v-.8a.47.47,0,0,1,.5-.5h4.5a.47.47,0,0,1,.5.5V51a.47.47,0,0,1-.5.5l-4.5.1Zm-.2,5.6a.43.43,0,0,1-.4-.4V52.9a.43.43,0,0,1,.4-.4h1.7a.43.43,0,0,1,.4.4v3.9a.43.43,0,0,1-.4.4Zm0,5.3a.43.43,0,0,1-.4-.4V58.2a.43.43,0,0,1,.4-.4h1.7a.43.43,0,0,1,.4.4v3.9a.43.43,0,0,1-.4.4Zm0,5.4a.43.43,0,0,1-.4-.4V63.6a.43.43,0,0,1,.4-.4h1.7a.43.43,0,0,1,.4.4v3.9a.43.43,0,0,1-.4.4Zm0,5.3a.43.43,0,0,1-.4-.4V68.9a.43.43,0,0,1,.4-.4h1.7a.43.43,0,0,1,.4.4v3.9a.43.43,0,0,1-.4.4Z"
              ></path>
              <path
                class="cls-3"
                d="M6.7,82.8V78.5H8.3a2,2,0,0,1,.8.1,1,1,0,0,1,.5.4,1.42,1.42,0,0,1,.2.6.75.75,0,0,1-.1.5,2.18,2.18,0,0,1-.5.4.92.92,0,0,1,.6.4,1.45,1.45,0,0,1,.2.7,1.27,1.27,0,0,1-.1.6,1.38,1.38,0,0,1-.3.4c-.1.1-.4.1-.5.1s-.4.1-.7.1Zm.6-.5H8.8c.1,0,.2-.1.3-.1s.1-.2.2-.3.1-.2.1-.4,0-.3-.1-.4L9,80.8c-.1,0-.4-.1-.6-.1h-1l-.1,1.6Zm0-2H8.7c.1,0,.3-.1.3-.2s.1-.2.1-.4a.6.6,0,0,0-.1-.4c-.1-.1-.2-.2-.3-.2s-.2-.1-.5-.1H7.3Z"
              ></path>
              <path
                class="cls-3"
                d="M10.8,82.8V78.5h1.9a2.22,2.22,0,0,1,.9.1,1,1,0,0,1,.5.4,1.42,1.42,0,0,1,.2.6,1.14,1.14,0,0,1-.3.8,1.88,1.88,0,0,1-.9.4c.2.1.3.1.3.2a3.17,3.17,0,0,1,.5.6l.7,1.2h-.7l-.6-.9a5.92,5.92,0,0,0-.4-.6l-.3-.3a.37.37,0,0,0-.3-.1h-1v1.9Zm.5-2.4h1.2c.3,0,.5,0,.6-.1s.3-.1.3-.3.1-.2.1-.4a.76.76,0,0,0-.2-.5,1.17,1.17,0,0,0-.7-.2H11.2l.1,1.5Z"
              ></path>
              <path class="cls-3" d="M16.1,82.8V79H14.7v-.5h3.4V79H16.7v3.8Z"></path>
            </g>
          </g>
        </g>
      </svg>
    </div>
  </div>
</template>
<script>
export default {
  name: 'southBusSvg',
  props: {
    IconLengh: {
      // 相位图标长度
      type: String,
      default: '91px'
    },
    IconWdith: {
      // 相位图标宽度
      type: String,
      default: '24px'
    },
    Data: {
      type: Object
    }
  },
  methods: {},
  mounted () {}
}
</script>
<style scoped>
.invisible {
  visibility: hidden;
}
.hide {
  display: none;
}
.cls-1 {
  fill: #5f5f5f;
  opacity: 0.8;
  isolation: isolate;
}
.cls-2 {
  opacity: 0.3;
}
.cls-3 {
  fill: #fff;
}
</style>
